{extend name="other/public"}
<link rel="stylesheet" href="/static/plug_in/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
{block name='css'}
<style>
  .layui-layout-admin .layui-footer{z-index: 999;}
  .layui-card{border:1px solid #eee;}
  .layui-tab-card{box-shadow: none;border:0;}
  .c1{position: relative;padding-bottom: 5px!important;}
  .c1 .layui-btn-group{margin-top: 5px;}
  .c2.layui-input-inline{width: 330px;}
  .c3{position: absolute;left:660px;top:-60px;width: 160px;height: 160px;}
  .c3 .c4:hover div{display: block;cursor: pointer;}
  .c3 .c4 div{display: none;transition: .2s;position: absolute;left:0;top: 0;background: rgba(0,0,0,.5);width: 100%;height: 100%;text-align: center;line-height: 160px;}
  .c3 .layui-icon{font-size: 30px;color: #fff;}
  .c4{flex: none;width: 200px;height: 100px;margin-right: 10px;
    text-align: center;
    vertical-align: middle;
    transition: .2s;
    border:1px solid #f9f9f9;
    background-color: #f1f1f1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }        
  .c4::before,.c4::after{content: "";display: inline-block;padding-bottom: 100%;width: .1px;vertical-align: middle;}
  .c5{width: 100px;padding-left: 110px;margin-top: 10px;}
  .c6{display: flex;}
  .c6 .c4{margin-right: 8px;width: 100%;position: relative;}
  .c6 .c4:hover div{display: block;cursor: pointer;}
  .c6 .c4 div{display: none;transition: .2s;position: absolute;left:0;top: 0;background: rgba(0,0,0,.5);width: 100%;height: 100%;text-align: center;line-height: 100px;}
  .c6 .layui-icon{font-size: 30px;color: #fff;}
  .c7.u-flex input{flex:1;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right: 0;}
  .c7 div{padding: 0 10px;background: #20222A;color: #fff;line-height: 29px;border-radius: 3px;border:1px solid #20222A;border-top-left-radius: 0;border-bottom-left-radius: 0;cursor: pointer;}
  .c10 input{border:1px solid #ccc;line-height: 29px;margin: 2px 0;padding: 0 10px;border-radius: 3px;width: 100%;}
  .c10 .u-flex{justify-content: flex-start;}
  .c10{flex:1;max-width: 500px;}
  .c11{width: 26px;border-radius: 3px;height: 100px;border:1px solid #ccc;margin-left: 10px;line-height: 100px;text-align: center;}
  .c11 .layui-icon{font-size: 20px;}
  .c12{margin-left: 110px;width: 300px;text-align: center;line-height: 32px;border-radius: 3px;justify-content: center;border:1px solid #ccc;margin-top: 10px;}
  .c12 .layui-icon{margin-right: 5px;}
  .c13{margin-bottom: 15px;}
</style>
{/block}
{block name='content'}
<div class="layui-fluid" id="app">
  <div class="layui-card">
    <form class="layui-form" action="" lay-filter="anForm">
      <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
          <li class="layui-this">基本信息</li>
          <!-- <li>其他选项</li> -->
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                  <label class="layui-form-label">名称：</label>
                  <div class="layui-input-block">
                    <input type="hidden" value="{$id}" name="id">
                    <input type="text" name="name" v-model="formData.name" placeholder="请输入名称" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">链接：</label>
                  <div class="layui-input-block">
                    <input type="text" name="url" v-model="formData.url" placeholder="请输入链接" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">发布</label>
                  <div class="layui-input-block">
                    <input type="radio" lay-filter="radio" name="is_show" value="1" title="发布" checked>
                    <input type="radio" lay-filter="radio" name="is_show" value="0" title="暂不发布">
                  </div>
                </div>       
            </div>
          </div>
          <div class="layui-tab-item">
            <div class="layui-tab-item layui-show">
              <div class="layui-card-body" style="padding: 15px;">


              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item layui-layout-admin">
        <div class="layui-input-block">
          <div class="layui-footer" style="left: 0;">
            <button type="button" class="layui-btn" @click="subForm()">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="closeTabPage()">取消编辑</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
{/block}

{block name='js'}
<script>
    function closeTabPage(){
        // parent.layui.admin.events.closeThisTabs();//关闭当前标签页
        location.href="{:url('list_data')}"
    }

    const pageDataJson = {$pageDataJson|raw};
    window.anVue = new Vue({
      el:"#app",
      data:{
        formData:{
          name:'',
          url:'',
          is_show:"{$pageData['is_show']}",
        }
      },
      mounted() {
        // for(let i in pageDataJson.imgs){
        //   console.log(pageDataJson.imgs[i].notes)
        // }
        
        this.formData.name = pageDataJson.name
        this.formData.url = pageDataJson.url

      },
      methods: {

        subForm(){
          var _this = this;
          var url = "{:url('form_add_data')}";
          if("{$id}"!='0'){
            this.formData.id = "{$id}";
            url = "{:url('form_data')}";
          }
          if(this.formData.title == ''){
            layer.msg('请输入广告名称')
            return false;
          }
          $.post(url,_this.formData,(res)=>{
            if(res.code == 1){
              layer.msg('操作成功，即将返回列表',{time: 1000},function(){
                location.href = "{:url('list_data')}"
              })
            }else{
              layer.msg(res.msg)
            }
          })
        }

      },
    })

  layui.config({
    base: '../../../static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'upload'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,upload = layui.upload
    ,element = layui.element
    ,layer = layui.layer
    ,laydate = layui.laydate
    ,form = layui.form;


    //表单初始化赋值
    form.val("anForm", {
      "is_show":"{$pageData['is_show']}"=='1'?true:false,
    });


    form.on('radio(radio)', function(data){
      console.log(data.elem); //得到radio原始DOM对象
      console.log(data.value); //被点击的radio的value值
      window.anVue.$data.formData.is_show = data.value;
    });  
     


    /* 监听提交 */
    form.on('submit(component-form-demo1)', function(data){

      delete data.field.file;
      if(Number(data.field.id)==0){
        delete data.field.id;
      }

      $.post("{:url('form_data')}",data.field,(res)=>{

        if(res.code == 1){
          layer.msg('操作成功，即将返回列表',{time: 1000},function(){
            location.href = "{:url('list_data')}"
          })
        }else{
          layer.msg(res.msg)
        }
        
      })

      return false;
    });
  });



  </script>
{/block}
